<%@ taglib prefix="stripes"
	uri="http://stripes.sourceforge.net/stripes.tld"%>
<stripes:layout-render name="layout/default.jsp"
	pageTitle="Using A Layout">

	<stripes:layout-component name="pageTitle">
	View basket
 	</stripes:layout-component>
	
	<stripes:layout-component name="html_head">
<script type="text/javascript">
			function viewBasket () {
				var currentBasketJSON = $.cookie('basket');
				var currentBasketObj = null;
				
				if(currentBasketJSON != null) {
					currentBasketObj  = $.evalJSON(currentBasketJSON);
					for(var i = 0; i < currentBasketObj.length; i++)
					{
						var quantity = currentBasketObj[i].quantity;
						
						$.ajax({
							  url: 'services/books/getInfo?id=' + currentBasketObj[i].id,
							  async: false,
							  dataType: 'json',
							  success: function (data) {
								  $('#basket > tbody:last').append(
											'<tr>' + 
											'<td>' + data.name + '</td>' + 
											'<td>' + data.author + '</td>' + 
											'<td>' + data.price + '</td>' +
											'<td>' + quantity + '</td>' +
											'<td></td>' +
											'<td><button onclick="removeReloadBasket(' + data.id + ',' + '1'  + ')">Remove from basket</button></td>' +
											'</tr>');
							  }
							});
					}
				}
			}
			
			function removeReloadBasket(id, quantity)
			{
				removeFromBasket(id, quantity);
				 $("#basket").find("tr:gt(0)").remove();
				 viewBasket();
			}
			
			$(document).ready(function() 
			{
						viewBasket();
			});
		</script>
	</stripes:layout-component>

	<stripes:layout-component name="contents">
		<table id="basket">
			<tbody>
				<tr>
					<th>Name</th>
					<th>Author</th>
					<th>Price</th>
					<th>Quantity</th>
					<th></th>
					<th></th>
				</tr>
			</tbody>
		</table>
		<form action="placeorder" method="post">
			<input type="submit" value="Place order" />
		</form>
	</stripes:layout-component>

</stripes:layout-render>